//定义一个轮播图类
class Carousel {
    constructor(tag) {
            //获取目标元素
            this.tag = document.querySelector(tag);
            //获取左右点击按钮
            this.lBtn = this.tag.querySelector(".l_btn");
            this.rBtn = this.tag.querySelector(".r_btn");
            //获取li列表
            this.list = this.tag.querySelectorAll(".img_box > ul > li");
            //获取所有li要移动的类名
            this.listClassName = ["list01", "list02", "list03", "list04"];
            //触发绑定事件
            this.eventFn();
            //初始化变量
            this.index = 0;
            // 获取小圆点
            this.dots = this.tag.querySelectorAll(".dot_box>span");
            //小圆点绑定事件
            this.dotsFn();
            // 获取上一个初始化变量
            this.lastIndex = 1;

            // 轮播图
            this.timer;
            this.timeFn();
            this.rBtnFn();
            this.opp();

        }
        //li全部重新设置类名
    restListFn() {
            this.list.forEach((item, idx) => {
                // console.log(item.classList);
                item.className = this.listClassName[idx];
            });
        }
        // 左右按钮绑定事件
    eventFn() {
            //点击右边按钮
            this.rBtn.addEventListener("click", () => {
                this.index++;
                //操作数组
                // 添加数组最后值到第一个值
                this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
                // 删除数字的最后一个值
                this.listClassName.pop();
                //li全部重新设置类名
                this.restListFn();
                console.log(this.listClassName);
                console.log(this);
                this.dotColorFn();
                this.lastIndex = this.index;
                if (this.index > 3) {
                    this.index = 0;
                }


                // //index操作完成之后重新赋值
                // this.lastIndex = this.index;

                // this.index++;
                // // index最大值
                // if (this.index == this.listClassName.length) {
                //     this.index = 0;
                // };
                // //去除当前li类名
                // this.list[this.lastIndex]
            });

            //点击左边按钮
            this.lBtn.addEventListener("click", () => {
                this.index--;
                //操作数组
                // 添加数组第一个值到最后
                this.listClassName.push(this.listClassName[0]);
                // 删除数字的第一个值
                this.listClassName.shift();
                //li全部重新设置类名
                this.restListFn();
                console.log(this.listClassName);
                this.dotColorFn();
                this.lastIndex = this.index;
            });
        }
        //小圆点绑定事件
    dotsFn() {
            this.dots.forEach(item => {
                item.addEventListener("click", () => {
                    //获取自定义属性data-index
                    let getIndex = item.getAttribute("data-index");
                    this.index = getIndex;
                    console.log(this.index);
                    // 添加数组最后值到第一个值
                    this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
                    // 删除数字的最后一个值
                    this.listClassName.pop();
                    //li全部重新设置类名
                    this.restListFn();
                    console.log(this.listClassName);
                    //颜色小圆点
                    this.dotColorFn();
                    this.lastIndex = this.index;
                })
            });
        }
        // 小圆点颜色
    dotColorFn() {
            this.dots[this.lastIndex - 1].classList.remove("dot_active");
            this.dots[this.index - 1].classList.add("dot_active");
        }
        // 封装右键按钮
    rBtnFn() {
        if (this.index > 3) {
            this.index = 0;
        }
        console.log(this.index);

        this.index++;


        // 添加数组最后值到第一个值
        this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
        // 删除数字的最后一个值
        this.listClassName.pop();
        //li全部重新设置类名
        this.restListFn();

        this.dotColorFn();

        this.lastIndex = this.index;


    };
    // 轮播图
    timeFn() {
            if (this.timer) {
                clearInterval(this.timer)
            }
            this.timer = setInterval(() => {
                this.rBtnFn();
            }, 2000)
        }
        // 定时器
    opp() {
        // console.log();
        let _this = this;
        this.tag.addEventListener("mouseenter", () => {
            clearInterval(this.timer);
        });
        this.tag.addEventListener("mouseleave", () => {
                setTimeout(this.timeFn(), 2000)
            })
            // 检测页面是否切换，切换就停止定时器
        window.addEventListener("visibilitychange", () => {
            if (document.hidden) {
                clearInterval(_this.timer);
            } else {
                _this.timeFn();
            }
        });

    }

}